<template>
  <div>
    <div id="echars-terr"
         style="width:100%;height: 430px; margin:10px auto 0 auto;">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getTerritoryStats } from '@/api/maintenance'
export default {
  props: {
    searchForm: {
      type: Object
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          // data: ['自签(完成)', '协签(完成)', '自签项目(完成)', '协签项目(完成)', '自签(计划)', '协签(计划)', '自签项目(计划)', '协签项目(计划)']
          data: ['自签(完成)', '协签(完成)', '自签(计划)', '协签(计划)']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            min: 0,
            interval: 200,
            axisLabel: {
              formatter: '{value} 万'
            }
          }
          // {
          //   type: 'value',
          //   name: '项目',
          //   min: 0,
          //   interval: 10,
          //   axisLabel: {
          //     formatter: '{value} 个'
          //   }
          // }
        ],
        series: [
          {
            name: '自签(完成)',
            type: 'bar',
            stack: '自签',
            data: []
          },
          {
            name: '协签(完成)',
            type: 'bar',
            stack: '自签',
            data: []
          },
          // {
          //   name: '自签项目(完成)',
          //   type: 'bar',
          //   stack: '完成项目',
          //   yAxisIndex: 1,
          //   data: []
          // },
          // {
          //   name: '协签项目(完成)',
          //   type: 'bar',
          //   stack: '完成项目',
          //   yAxisIndex: 1,
          //   data: []
          // },
          {
            name: '自签(计划)',
            type: 'bar',
            stack: '计划',
            data: []
          },
          {
            name: '协签(计划)',
            type: 'bar',
            stack: '计划',
            data: []
          }
          // {
          //   name: '自签项目(计划)',
          //   type: 'bar',
          //   stack: '计划项目',
          //   yAxisIndex: 1,
          //   data: []
          // },
          // {
          //   name: '协签项目(计划)',
          //   type: 'bar',
          //   stack: '计划项目',
          //   yAxisIndex: 1,
          //   data: []
          // }
        ]
      }
    }
  },
  mounted() {
    if (this.activeName === 'territory') this.getData()
  },
  methods: {
    // 请求数据
    getData() {
      getTerritoryStats(this.searchForm).then(res => {
        if (res.data.success) {
          const result = res.data.data

          this.options.xAxis[0].data = []
          this.options.series[0].data = []
          this.options.series[1].data = []
          this.options.series[2].data = []
          this.options.series[3].data = []
          // this.options.series[4].data = []
          // this.options.series[5].data = []
          // this.options.series[6].data = []
          // this.options.series[7].data = []
          // 初始化图标轴与数据
          result.forEach(item => {
            this.options.xAxis[0].data.push(item.territory)
            this.options.series[0].data.push(item.sinceDone)
            this.options.series[1].data.push(item.agreementdDone)
            // this.options.series[2].data.push(item.sinceDoneCount)
            // this.options.series[3].data.push(item.agreementdDoneCount)
            this.options.series[2].data.push(item.sincePlan)
            this.options.series[3].data.push(item.agreementdPlan)
            // this.options.series[6].data.push(item.sincePlanCount)
            // this.options.series[7].data.push(item.agreementdPlanCount)
          })

          // 合并数组
          const _dataAmount = this.options.series[0].data.concat(this.options.series[1].data, this.options.series[2].data, this.options.series[3].data)
          // 取数组最大值除10,作为Y轴间隔
          this.options.yAxis[0].interval = Math.round(Math.max(..._dataAmount) / 5, 0)
          // 合并数组
          // const _dataCount = this.options.series[2].data.concat(this.options.series[3].data, this.options.series[6].data, this.options.series[7].data)
          // 取数组最大值除10,作为Y轴间隔
          // this.options.yAxis[1].interval = Math.round(Math.max(..._dataCount) / 5, 0)
          // 数据加载完成后渲染图表
          var myChartTerr = echarts.init(document.getElementById('echars-terr'), 'macarons')
          myChartTerr.setOption(this.options)
        }
      })
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'territory') this.getData()
    }
  }
}
</script>
